import './style.scss'
import { useState } from 'react';
import { Link, useParams } from 'react-router-dom';
import type { ResponseType } from './types';
import useRequest from '../../hooks/useRequest';

const SearchList = () => {
  const params = useParams<{shopId: string; keyword:string | undefined}>();
  const [keyword, setKeyword] = useState(params.keyword);
  const [tabValue, setTabValue] = useState('default');
  const [requestData, setRequestData] = useState({// 默认请求数据
    url: '/shop-search-list.json',
    method: 'GET',
    params: {
      keyword,
      shopId: params.shopId,
      type: tabValue
    }
  })
  const { data } = useRequest<ResponseType>(requestData);
  const list = data?.data || [];
  function handleClearKeyword(){
    setKeyword('');
  }
  function handleKeyDown (key: string){
    if(key === 'Enter' && keyword){
      // 更新本地存储的内容
      const localSearchList = localStorage.getItem('search-list');
      const searchListHistory: string[] = localSearchList ? JSON.parse(localSearchList) : [];
      const keywordIndex = searchListHistory.findIndex(item => item === keyword);
      const newHistoryList = [...searchListHistory];
      if (keywordIndex > -1){
        newHistoryList.splice(keywordIndex, 1);
      }
      newHistoryList.unshift(keyword);
      if(newHistoryList.length > 20){
        newHistoryList.length = 20;
      }
      localStorage.setItem('search-list', JSON.stringify(newHistoryList));
      const newRequestData = {...requestData};
      newRequestData.params.keyword = keyword;
      setRequestData(newRequestData)
    }
  }
  function handleTabClick(tabValue: string){
    setTabValue(tabValue);
    const newRequestData = {...requestData};
    newRequestData.params.type = tabValue;
    setRequestData(newRequestData)
    // setKeyword('');
  }
  
  return (
    <div className="page search-list-page">
      <div className="search">
        <Link to={`/search/${params.shopId}`} className='search-back-link'>
          <div className="iconfont search-back-icon">&#xe600;</div>
        </Link>
        <div className="search-area">
          <div className="iconfont search-icon">&#xe6c5;</div>
          <input type="text" 
            className="search-input" 
            placeholder='请输入商品名称' 
            value={keyword} 
            onChange={(e)=>{setKeyword(e.target.value)}}
            onKeyDown={(e)=>{handleKeyDown(e.key)}}
           />
        </div>
        <div className="search-clear iconfont" onClick={handleClearKeyword}>&#xe62b;</div>
      </div>
      <div className="tab">
        <div onClick={()=>{handleTabClick('default')}}
        className={tabValue === 'default' ? 'tab-item tab-item-active' : 'tab-item'}>默认</div>
        <div onClick={()=>{handleTabClick('sales')}}
        className={tabValue === 'sales' ? 'tab-item tab-item-active' : 'tab-item'}>销量</div>
        <div onClick={()=>{handleTabClick('price')}}
        className={tabValue === 'price' ? 'tab-item tab-item-active' : 'tab-item'}>价格</div>
      </div>
      <div className="list">
        {
          list.map(item => {
            return (
              <Link to={`/detail/${item.id}`} key={item.id}>
                <div className="item" >
                  <img className="item-img" src={item.imgUrl} alt={item.title} />
                  <div className="item-content">
                    <p className="item-title">{item.title}</p>
                    <div className="item-price">{item.price}
                      <span className="item-price-yen">&yen;</span>
                    </div>
                    <div className="item-sales">已售{item.sales}</div>
                  </div>
                </div>
              </Link>
            )
          })
        }
      </div>
      <div className="bottom">
        - 我是有底线的 -
      </div>
    </div>
  )
}

export default SearchList;